<template>
	<a-layout id="components-layout-demo-top" class="layout" ref="contentData">
		<div class="topmenu">
			<a-layout-header>
				<div class="logo"><img
						:src="requestUrl=='http://test.api.dekt.ac.acxk.net/'?require('../../assets/logo1.png'):require('../../assets/logo.png')" />
					<span style="font-size: 18px;">第二课堂(产品版)</span>
				</div>
				<a-menu theme="dark" mode="horizontal" :default-selected-keys="['2']">
					<a-menu-item @click="goHome">
						<a-icon type="home" />
						首页
					</a-menu-item>
					<a-menu-item v-if="form.IsAdmin" @click="Managementbackstage()">
						<img src="../../assets/backstage_icon.png" />
						管理后台
					</a-menu-item>
					<!-- <a-menu-item @click="menu()">
						<a-icon type="menu" />
						菜单
					</a-menu-item> -->
					<a-menu-item @click="reload">
						<img src="../../assets/Refresh_icon.png" />
						刷新
					</a-menu-item>
					<a-menu-item @click="goBack">
						<img src="../../assets/return_ico_click.png" />
						返回
					</a-menu-item>
					<a-menu-item @click="logout" style="margin-left:50px;">
						<img src="../../assets/sign out_icon.png" />
						退出
					</a-menu-item>
				</a-menu>
				<!-- <a-drawer width="100" height="100" placement="top" :closable="false" :visible="visible" v-if="visible" @close="onClose">
					
				</a-drawer> -->
			</a-layout-header>
			<div class="information">
				<div class="userimg">
					<div class="c-l">
						<a-avatar :src="form.HeadImage ? requestUrl + form.HeadImage : avatar" />
						<span class="uptouxiang" @click="updatetouxiang"><i title=""
								style="color: #1890FF;font-weight: 600;"
								class="iconfont icon-shangchuantouxiang "></i></span>
					</div>
					<div class="username">{{ form.Name }}</div>
					<div class="userno">{{ form.UserNo }}</div>
				</div>
			</div>
		</div>
		<a-layout-content class="maincontent">
			<div class="menulist">
				<div class="menulistcon" v-if="TeacherActivityFlowList.length > 0&&userInfo.Type=='2'">
					<h4><span class="san"></span>审批 </h4>
					<div class="li addheight" @click="changeTeacherActivityFlow(item)"
						v-for="(item, i) in TeacherActivityFlowList" :key="i">
						<div class="menucontent">
							<div class="imga"></div>
							<span>{{ item.Name }}</span>
						</div>
					</div>
				</div>
				<div class="menulistcon">
					<h4><span class="san"></span> 活动</h4>
					<div class="li" @click="seeList('UserApplyActivityRecord')">
						<div class="menucontent">
							<!-- <div class="imge"></div> -->
							<div class="zdyImg icon6"></div>
							<span>活动申请记录</span>
						</div>
					</div>
					<div class="li" @click="seeList('UserActivitymanage')">
						<div class="menucontent">
							<!-- <div class="img"></div> -->
							<div class="zdyImg icon7"></div>
							<span>发起的活动</span>
						</div>
					</div>
					<div class="li" @click="seeList('MoreJoinActivity')">
						<div class="menucontent">
							<!-- 	<div class="imgc"></div> -->
							<div class="zdyImg icon8"></div>
							<span>参加的活动</span>
						</div>
					</div>
					<div class="li" @click="seeList('MoreManageActivity')">
						<div class="menucontent">
							<!-- <div class="img"></div> -->
							<div class="zdyImg icon9"></div>
							<span>管理的活动</span>
						</div>
					</div>
					<div class="clear"></div>
					<div class="dashline"></div>
					<h4> <span class="san"></span>学生组织 </h4>
					<div class="li" @click="seeList('UserApplyClubRecord')">
						<div class="menucontent">
							<!-- 	<div class="imgd"></div> -->
							<div class="zdyImg icon3"></div>
							<span>学生组织申请</span>
						</div>
					</div>
					<div class="li" @click="seeList('MoreJoinClub')">
						<div class="menucontent">
							<!-- <div class="imgd"></div> -->
							<div class="zdyImg icon4"></div>
							<span>参加的学生组织</span>
						</div>
					</div>
					<div class="li" @click="seeList('MoreManageClub')">
						<div class="menucontent">
							<!-- <div class="imgd"></div> -->
							<div class="zdyImg icon5"></div>
							<span>管理的学生组织</span>
						</div>
					</div>
					<div class="li" @click="seeList('ClassStudent')" v-show="form.IsClassCharge">
						<div class="menucontent">
							<!-- <div class="imgb"></div> -->
							<div class="zdyImg icon1"></div>
							<span>班级成员管理</span>
						</div>
					</div>
					<div class="li" @click="seeList('UserPrize')">
						<div class="menucontent">
							<!-- <div class="imgb"></div> -->
							<div class="zdyImg icon2"></div>
							<span>获奖记录</span>
						</div>
					</div>
					<div class="clear"></div>
					<div class="dashline"></div>
					<h4><span class="san"></span>社会实践</h4>
					<div class="li" @click="seeList('UserPracticeTeam')">
						<div class="menucontent">
							<!-- <div class="img"></div> -->
							<div class="zdyImg icon10"></div>
							<span>寒暑假实践团队</span>
						</div>
					</div>
					<div class="li" v-if="form.Type == 2" @click="seeList('UserPracticeTeamFlow')">
						<div class="menucontent">
							<!-- <div class="img"></div> -->
							<div class="zdyImg icon7"></div>
							<span>寒暑假实践审核</br>（指导老师）</span>
						</div>
					</div>
					<div class="clear"></div>
					<div class="dashline"></div>
					<h4><span class="san"></span>积分申请</h4>
					<div class="li" @click="seeList('Creditapplication')">
						<div class="menucontent">
							<!-- <div class="imge"></div> -->
							<div class="zdyImg icon11"></div>
							<span>积分申请</span>
						</div>
					</div>
					<div class="li" @click="seeList('publicity')">
						<div class="menucontent">
							<!-- <div class="imge"></div> -->
							<div class="zdyImg icon12"></div>
							<span>公示列表</span>
						</div>
					</div>
					<div class="li" @click="seeList('UserCreditApplyBan')" v-if="userInfo.isHeadMaster">
						<div class="menucontent">
							<div class="imge"></div>
							<span>积分申请管理</br>（班主任）</span>
						</div>
					</div>

				</div>
				<div class="foot">
					<div>Copyright 2019-2029</div>
					<a href="http://www.acthink.net/">© 安财信科 ACThink.net</a>
				</div>
			</div>
			<div class="rightcontent" ref="tableForm" id="content">
				<div class="righcon">
					<div class="conleft">
						<div class="username">
							{{ form.Name }}
							<a-icon v-if="form.Sex == 2" style="color: deeppink;" type="woman" />
							<a-icon v-else style="color: #1890FF;" type="man" />
							<!-- <span class="updateinfo">
								<span @click="updateMyInfo()">同步个人信息<oprateBtn style="vertical-align: bottom;" title='班级信息不一致时请点击"同步个人信息"按钮进行数据同步' icon="icon-wenhao" color="white"></oprateBtn></span>
							</span> -->
						</div>
						<div class="other">
							<div class="c-c-c" v-if="form.Type == 1">
								<span>
									<img src="../../assets/number_icon.png" />
									{{ form.UserNo }}
								</span>
								<span>
									<img src="../../assets/type_icon.png" />
									{{ form.ClassName }}
								</span>
								<span>{{ form.Grade }}</span>
								<span>
									<img src="../../assets/department_icon.png" />
									{{ form.DepartName }}
								</span>
							</div>
							<div v-else class="c-c-c">
								<span>
									<img src="../../assets/number_icon.png" />
									{{ form.UserNo }}
								</span>
								<span>
									<img src="../../assets/type_icon.png" />
									教师
								</span>
								<span>
									<img src="../../assets/department_icon.png" />
									{{ form.DepartName }}
								</span>
							</div>
						</div>

					</div>
					<div class="conright" v-if="form.Type == 1">
						<h3 class="flex">
							<div class="flex-1">我的积分</div>
							<a-button class="more" @click="seeList('UserScoreRecord')">更多 >></a-button>
						</h3>
						<div class="ul">
							<div class="scorecon">
								<div class="pointer" :style="{ transform: `rotate(${imgList2(score).rotate})` }"><img
										src="../../assets/Pointer_left.png" /></div>
							</div>
							<div class="scorecontit" :style="{ color: imgList2(score).color }">{{ score.toFixed(2) }}分
							</div>
						</div>
					</div>
				</div>

				<div class="c-content"  v-if="isRouterAlive">
					<keep-alive>
						<router-view :key="$route.fullPath" v-if="$route.meta.keepAlive"></router-view>
					</keep-alive>
					<router-view :key="$route.fullPath" v-if="!$route.meta.keepAlive"></router-view>
				</div>
			</div>
		</a-layout-content>
		<uploadHeadImg v-show="showModal" @closeFun="closeFun(data)"></uploadHeadImg>
	</a-layout>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		GetJoinClubList,
		GetNewsTypeListManage,
		GetAdminMenu,
		DoLoginOut,
		UserDoUpdateBase64Image,
		UserDoSetHeadImage,
		LoginOut,
		GetTeacherActivityFlowTypeListCommon,
		UserCenterDoUpdateInfo,
		GetUserInfo,
		UserDoGetScoreList
	} from '@/api/follow';
	import uploadHeadImg from './UploadHeadImg';
	import Cache from '@/utils/cache';
	export default {
		components: {
			uploadHeadImg
		},
		data() {
			return {
				menuList: [{
						title: '基础信息',
						path: '111',
						type: 'appstore',
						id: '9'
					},
					{
						title: '测试信息',
						path: '111',
						type: 'appstore',
						id: '8'
					}
				],
				ClubList: [],
				avatar: 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png',
				approvalList: '',
				showModal: false,
				form: Cache.get('myInfo'),
				newsList: [],
				loadshow: false,
				menushow: false,
				visible: false,
				isRouterAlive: true,
				requestUrl: this.global.requestUrl,
				TeacherActivityFlowList: [],
				scoreList: [],
				userInfo: Cache.get('myInfo')
			};
		},
		created() {
			if (Cache.get('token')) {} else {
				this.$router.push({
					name: 'register'
				});
			}
			// if (Cache.get('loginKey') == 1) {
			// 	this.loadshow = true;
			// 	this.$router.go(0);
			// 	Cache.remove('loginKey');
			// 	this.loadshow = false;
			// }
		},
		mounted() {
			this.$router.afterEach((to, from, next) => {
				window.scrollTo(0, 0)
			})
			setTimeout(() => {
				this.getOtherList();
				if (this.form.IsAdmin) {
					this._GetAdminMenu();
				}
			}, 100)
			setTimeout(() => {
				if (this.form.Type == 1) {
					this.getScoreList()
				}
			}, 1000)
		},
		activated() {},
		computed: {
			score: function() {
				let scoreList = this.scoreList;
				let scoreAll = 0;
				for (let i = 0; i < scoreList.length; i++) {
					if (scoreList[i].TotalScore) {
						scoreAll = scoreAll + scoreList[i].TotalScore;
					}
				}
				// Cache.set('score',scoreAll)
				this.$store.commit('score', scoreAll);
				return scoreAll;
			}
		},
		methods: {
			backTop() {
				var timer = setInterval(function() {
					let osTop =
						document.documentElement.scrollTop || document.body.scrollTop;
					let ispeed = Math.floor(-osTop / 5);
					document.documentElement.scrollTop = document.body.scrollTop =
						osTop + ispeed;
					this.isTop = true;
					if (osTop === 0) {
						clearInterval(timer);
					}
				}, 30);
			},
			async getScoreList() {
				let res8 = await UserDoGetScoreList();
				this.scoreList = res8.data.data;
				let scoreList = this.scoreList;
				let scoreAll = 0;
				console.log(scoreList)
				for (let i = 0; i < scoreList.length; i++) {
					if (scoreList[i].TotalScore) {
						scoreAll = scoreAll + scoreList[i].TotalScore;
					}
				}
				this.rotate = (scoreAll / 40) * 180 > 180 ? '180deg' : (scoreAll / 40) * 180 + 'deg';
				// scoreAll
			},
			async getOtherList() {
				let res = await GetTeacherActivityFlowTypeListCommon();
				this.TeacherActivityFlowList = res.data.data;
			},

			async updatetouxiang() {
				// let data = {}
				// let res = await UserDoUpdateBase64Image(data)
				this.showModal = true;
			},
			async _GetAdminMenu() {
				let OneMenu = [];
				let TwoMenu = [];
				let ThreeMenu = [];
				let AdminMenuList = [];
				let res = await GetAdminMenu();
				let list = res.data.data ? res.data.data : [];
				for (let i = 0; i < list.length; i++) {
					OneMenu.push(list[i]);
					for (let m = 0; m < list[i].GroupData.length; m++) {
						TwoMenu.push(list[i].GroupData[m]);
						for (let n = 0; n < list[i].GroupData[m].FunctionGroupData.length; n++) {
							ThreeMenu.push(list[i].GroupData[m].FunctionGroupData[n]);
							for (let p = 0; p < list[i].GroupData[m].FunctionGroupData[n].FunctionData.length; p++) {
								AdminMenuList.push(list[i].GroupData[m].FunctionGroupData[n].FunctionData[p]);
							}
						}
					}
				}
				Cache.set('OneMenu', OneMenu);
				Cache.set('TwoMenu', TwoMenu);
				Cache.set('ThreeMenu', ThreeMenu);
				Cache.set('AdminMenuList', AdminMenuList);
			},
			goHome() {
				this.$router.push('/');
			},
			seeList(name) {
				    content.scrollIntoView()
				this.onClose();
				this.$router.push({
					name: name
				});
			},
			imgList2(totalScore) {
				let type = 0;
				if (totalScore < 30) {
					type = 0;
				}

				if (totalScore >= 30) {
					type = 1;
				}
				switch (type) {
					case 0:
						return {
							rotate: '75deg',
								color: '#FF5050'
						};
						break;
					case 1:
						return {
							rotate: '105deg',
								color: '#3AA1FF'
						};
						break;
				}
			},
			imgList(totalScore) {
				let type = 0;
				if (totalScore < 10) {
					type = 0;
				}
				if (totalScore >= 10 && totalScore < 20) {
					type = 1;
				}
				if (totalScore >= 20 && totalScore < 30) {
					type = 2;
				}
				if (totalScore >= 30 && totalScore < 40) {
					type = 3;
				}
				if (totalScore >= 40) {
					type = 4;
				}
				switch (type) {
					case 0:
						return {
							rotate: (totalScore / 40) * 180 + 'deg',
								color: '#FF5050'
						};
						break;
					case 1:
						return {
							rotate: (totalScore / 40) * 180 + 'deg',
								color: '#3AA1FF'
						};
						break;
					case 2:
						return {
							rotate: (totalScore / 40) * 180 + 'deg',
								color: '#5359EC'
						};
						break;
					case 3:
						return {
							rotate: (totalScore / 40) * 180 + 'deg',
								color: '#1CD1A1'
						};
						break;
					case 4:
						return {
							rotate: (totalScore / 40) * 180 + 'deg',
								color: '#FBC23F'
						};
						break;
				}
			},
			changeTeacherActivityFlow(item) {
				 content.scrollIntoView()
				this.onClose();
				this.$router.push({
					name: 'TeacherActivityFlow',
					query: {
						ID: item.ID,
						Name: item.Name
					}
				});
			},
			timeonClose() {
				setTimeout(this.onClose(), 3000);
			},
			onClose() {
				this.visible = false;
			},
			menu() {
				this.visible = true;
			},
			openmenu() {
				this.visible = true;
			},
			closemenu() {
				this.menushow = false;
			},
			Managementbackstage() {
				this.$router.push({
					name: 'Home'
				});
			},
			async logout() {
				let res = await LoginOut();
				Cache.remove('token');
				Cache.remove('SYS_TOKEN');
				Cache.remove('listMenus');
				Cache.remove('DealerID');
				Cache.remove('Type');
				Cache.remove('info');
				this.$router.push({
					name: 'register'
				});
				// window.location.href = 'http://i.aufe.edu.cn/portal_main/toPortalPage';
			},
			async getList() {
				let data = {};
				let res = await GetNewsTypeListManage(data);
				this.newsList = res.data.data;
			},
			closeFun(index) {
				this.form = Cache.get('myInfo');
				this.showModal = false;
			},
			goBack() {
				this.$router.back(-1);
			},
			reload() {
				this.isRouterAlive = false;
				this.$nextTick(function() {
					this.isRouterAlive = true;
				});
				if (this.form.Type == 1) {
					this.getScoreList()
				}
			},
			async updateMyInfo() {
				let that = this;
				let content = '您确定要同步个人信息码？';
				this.$confirm({
					title: '提示',
					content: content,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let res = await UserCenterDoUpdateInfo()
						if (res.data.code == 0) {
							that.$message.success(res.data.msg);
							let res1 = await GetUserInfo();
							that.form = res1.data
							Cache.set('myInfo', res1.data);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.topmenu {
		background: url(../../assets/nav_top_bg.png) top center;
	}

	.ant-layout {
		background: #f0f4f9;
		min-width: 1200px;
	}

	.ant-layout-header {
		margin: 0 auto;
		min-width: 1200px;
		padding: 0px;
		background: none;
		height: 62px;
	}

	#components-layout-demo-top {
		width: 100%;
		margin: 0 auto;
	}

	#components-layout-demo-top .logo {
		width: 444px;
		height: 51px;
		margin-top: 10px;
		float: left;
		color: #fff;
		text-align: center;
		display: flex;
		align-items: center;

		img {
			width: 250px;
			height: 51px;
			vertical-align: baseline;
		}
	}

	.ant-menu-dark {
		background: none;
		float: right;
	}

	.ant-menu-dark.ant-menu-horizontal>.ant-menu-item {
		color: black;
		padding: 0 20px;
		background: rgba(0, 0, 0, 0.2);
		line-height: 40px;
		height: 40px;
		margin: 0 7px;
		color: rgba(255, 255, 255, 0.6);
		border-radius: 10px;

		.anticon {
			color: #fff;
			margin-right: 4px;
		}
	}

	.ant-layout-header ul {
		line-height: 30px;
		margin-top: 10px;
	}

	.information {
		color: white;
		width: 100%;
		margin: 0 auto;
		// background: #3b90f8;
		// background-size: 100% 100%;
		min-width: 1200px;

		.userimg {
			width: 300px;
			margin-top: 30px;
			padding-bottom: 33px;

			.c-l {
				position: relative;
				width: 98px;
				height: 98px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border: 6px solid rgba(255, 255, 255, 0.3);
				border-radius: 50%;

				.ant-avatar {
					width: 86px;
					height: 86px;
				}

				.uptouxiang {
					width: 26px;
					height: 26px;
					position: absolute;
					right: -10px;
					top: 28px;
					background-color: white;
					border-radius: 50%;

					i {
						font-size: 20px;
						margin-left: 2.5px;
					}
				}

				.uptouxiang:hover {
					cursor: pointer;
				}
			}

			.username {
				height: 46px;
				font-size: 20px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				line-height: 46px;
				color: rgba(255, 255, 255, 0.9);
				text-align: center;
			}

			.userno {
				height: 20px;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				line-height: 20px;
				color: rgba(255, 255, 255, 0.6);
				text-align: center;
			}
		}

		.c-header {
			height: 120px;
			margin: 0 auto;
			padding: 30px;
			// background: #fff;
			border-radius: 5px 5px 0 0;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
		}

		.c-c {
			margin-left: 30px;
			color: #333;
		}

		.c-c-t {
			font-size: 20px;
			font-weight: 600;
		}

		.anticon:hover {
			cursor: pointer;
		}

		.c-r {
			width: 25%;
			color: #1890ff;
			display: flex;
			justify-content: flex-end;
		}

		.c-r-b {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}
	}

	.maincontent {
		// margin:0 auto;
		display: flex;
	}

	.menulist {
		width: 300px;
		overflow: hidden;

		.menulistcon {
			// height:520px;
			overflow-y: hidden;
			margin: 20px 0;

			h4 {
				padding: 0 20px;
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(57, 82, 123, 0.6);
				display: flex;
				align-items: center;
			}

			.li {
				cursor: pointer;

				&:nth-child(8) {
					.img {
						background: url(../../assets/faqi1.png) no-repeat 100%;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 0.6;
					}
				}

				&:nth-child(8) :hover {
					.img {
						background: url(../../assets/faqi.png) no-repeat 100%;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 1;
					}
				}

				&:nth-child(10) {
					.img {
						background: url(../../assets/guanli.png) no-repeat;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 0.6;
					}
				}

				&:nth-child(10) :hover {
					.img {
						background: url(../../assets/guanli1.png) no-repeat;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 1;
					}
				}

				&:nth-child(11) {
					.img {
						background: url(../../assets/jiaqi1.png) no-repeat;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 0.6;
					}
				}

				&:nth-child(11) :hover {
					.img {
						background: url(../../assets/jiaqi.png) no-repeat;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 1;
					}
				}

				&:nth-child(12) {
					.img {
						background: url(../../assets/jiaqi1.png) no-repeat;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 0.6;
					}
				}

				&:nth-child(12) :hover {
					.img {
						background: url(../../assets/jiaqi.png) no-repeat;
						width: 40px;
						height: 40px;
						display: block;
						margin: 0 auto;
						opacity: 1;
					}
				}
			}
		}

		*::-webkit-scrollbar {
			height: 5px;
			width: 5px;
		}

		*::-webkit-scrollbar-thumb {
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px #4577eb;
			background: #4577eb;
		}

		*::-webkit-scrollbar-track {
			border-radius: 0;
			background: rgba(57, 82, 123, 0.2);
		}

		.li {
			width: 44%;
			margin: 10px 3% 10px;
			float: left;
			text-align: center;
			padding: 18px 0;
			border-radius: 12px;
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: rgba(57, 82, 123, 0.6);

			i {
				font-size: 40px;
			}

			&:hover {
				background: #4577eb;
				box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
				color: #fff;
			}
		}
	}

	.rightcontent {
		// flex:1;
		width: calc(~'100vw - 320px');
		margin-left: 10px;
		min-height: 596px;
		margin-top: -220px;
		background: #fff;
		padding: 25px 15px;
		margin-right: 10px;
		border-radius: 12px;
		box-shadow: 0px 3px 60px rgba(0, 0, 0, 0.2);

		.righcon {
			height: 180px;
			display: flex;

			.conleft {
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.28);
				border-radius: 16px;
				padding: 30px 20px;
				flex: 1;

				.username {
					font-size: 20px;
					font-family: Segoe UI;
					font-weight: bold;
					line-height: 27px;
					color: rgba(57, 82, 123, 0.95);
				}

				.other {
					height: 24px;
					font-size: 18px;
					font-family: Segoe UI;
					font-weight: bold;
					line-height: 24px;
					color: rgba(57, 82, 123, 0.95);
					margin-top: 20px;

					span {
						margin-right: 20px;

						img {
							vertical-align: text-bottom;
							margin-right: 10px;
						}
					}
				}

				.updateinfo {
					padding: 6px 10px;
					border-radius: 6px;
					font-size: 15px;
					margin: 0 0 0 25px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					background: #4577eb;
					box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
					color: #fff;
					cursor: pointer;
				}
			}

			.conright {
				width: 400px;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.28);
				border-radius: 16px;
				padding: 10px;
				margin-left: 15px;

				.ul {
					margin-top: -30px;
				}

				h3 {
					color: #383649;
					font-size: 14px;
					font-weight: 600;
					margin-bottom: 5px;

					.more {
						border: none;
						height: 27px;
						background: #ffffff;
						box-shadow: none;
						font-size: 12px;
						color: #4577eb;
						font-family: 宋体;
						padding: 0px 10px;
						display: block;

						.anticon {
							margin-left: -6px;
							line-height: 30px;
						}
					}
				}

				.scorecon {
					width: 262px;
					height: 87px;
					background: url(../../assets/Chart@2x.png) no-repeat center top;
					background-size: 262px 87px;
					position: relative;
					margin: 0 auto;

					.pointer {
						position: absolute;
						bottom: 0px;
						left: 50%;
						width: 112px;
						height: 15px;
						margin-left: -56px;
						transition: All 0.4s ease-in-out;

						img {
							vertical-align: baseline;
						}
					}
				}

				.scorecontit {
					text-align: center;
					height: 40px;
					font-size: 24px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					line-height: 40px;
					margin-top: 6px;
				}
			}

		}

		.c-content {
			margin-top: 10px;
		}
	}

	.ant-menu.ant-menu-dark .ant-menu-item-selected {
		color: rgba(255, 255, 255, 1);

		.anticon {}
	}

	.anticon {
		line-height: 50px;
		margin-right: 5px;
		margin-right: 0px;
		color: #1890ff;
	}

	.anticon {
		line-height: 30px;
	}

	.foot {
		border-top: 1px solid rgba(57, 82, 123, 0.2);
		// margin-top: 20px;
		// padding-top: 20px;
		text-align: center;
		height: 43px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 24px;
		color: #5d7294;

		a {
			color: #5d7294;
		}
	}

	.imga {
		background: url(../../assets/11_icon.png) no-repeat;
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.imgb {
		background: url(../../assets/22_icon.png) no-repeat;
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.imgc {
		background: url(../../assets/33_icon.png) no-repeat;
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.imgd {
		background: url(../../assets/44_icon.png) no-repeat;
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.imge {
		background: url(../../assets/66_icon.png) no-repeat;
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.menulist .li:hover .imga {
		background: url(../../assets/1_icon_click.png) no-repeat;
	}

	.menulist .li:hover .imgb {
		background: url(../../assets/2_icon_click.png) no-repeat;
	}

	.menulist .li:hover .imgc {
		background: url(../../assets/3_icon_click.png) no-repeat;
	}

	.menulist .li:hover .imgd {
		background: url(../../assets/4_icon_click.png) no-repeat;
	}

	.menulist .li:hover .imge {
		background: url(../../assets/6_icon_click.png) no-repeat;
	}

	.zdyImg {
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
	}

	.icon1 {
		background: url(../../assets/newIcon/black/icon1.png) no-repeat;
	}

	.menulist .li:hover .icon1 {
		background: url(../../assets/newIcon/hover/icon1.png) no-repeat;
	}

	.icon2 {
		background: url(../../assets/newIcon/black/icon2.png) no-repeat;
	}

	.menulist .li:hover .icon2 {
		background: url(../../assets/newIcon/hover/icon2.png) no-repeat;
	}

	.icon3 {
		background: url(../../assets/newIcon/black/icon3.png) no-repeat;
	}

	.menulist .li:hover .icon3 {
		background: url(../../assets/newIcon/hover/icon3.png) no-repeat;
	}

	.icon4 {
		background: url(../../assets/newIcon/black/icon4.png) no-repeat;
	}

	.menulist .li:hover .icon4 {
		background: url(../../assets/newIcon/hover/icon4.png) no-repeat;
	}

	.icon5 {
		background: url(../../assets/newIcon/black/icon5.png) no-repeat;
	}

	.menulist .li:hover .icon5 {
		background: url(../../assets/newIcon/hover/icon5.png) no-repeat;
	}

	.icon6 {
		background: url(../../assets/newIcon/black/icon6.png) no-repeat;
	}

	.menulist .li:hover .icon6 {
		background: url(../../assets/newIcon/hover/icon6.png) no-repeat;
	}

	.icon7 {
		background: url(../../assets/newIcon/black/icon7.png) no-repeat;
	}

	.menulist .li:hover .icon7 {
		background: url(../../assets/newIcon/hover/icon7.png) no-repeat;
	}

	.icon8 {
		background: url(../../assets/newIcon/black/icon8.png) no-repeat;
	}

	.menulist .li:hover .icon8 {
		background: url(../../assets/newIcon/hover/icon8.png) no-repeat;
	}

	.icon9 {
		background: url(../../assets/newIcon/black/icon9.png) no-repeat;
	}

	.menulist .li:hover .icon9 {
		background: url(../../assets/newIcon/hover/icon9.png) no-repeat;
	}

	.icon10 {
		background: url(../../assets/newIcon/black/icon10.png) no-repeat;
	}

	.menulist .li:hover .icon10 {
		background: url(../../assets/newIcon/hover/icon10.png) no-repeat;
	}

	.icon11 {
		background: url(../../assets/newIcon/black/icon11.png) no-repeat;
	}

	.menulist .li:hover .icon11 {
		background: url(../../assets/newIcon/hover/icon11.png) no-repeat;
	}

	.icon12 {
		background: url(../../assets/newIcon/black/icon12.png) no-repeat;
	}

	.menulist .li:hover .icon12 {
		background: url(../../assets/newIcon/hover/icon12.png) no-repeat;
	}

	.clear {
		clear: both;
	}

	.sanjiao {
		width: 12px;
		height: 10px;
		margin-left: 10px;
	}

	.san {
		display: inline-block;
		width: 3px;
		height: 18px;
		background: #93A2B9;
		border-radius: 2px 2px 2px 2px;
		opacity: 1;
		margin-right: 20px
	}

	.dashline {
		height: 0.3px;
		border: none;
		background-color: rgba(168, 168, 168, 0.7);
		margin: 10px 20px 30px 20px;
	}
	.addheight{
		height: 140px;
	}
</style>
